<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane
        v-for="item in tabMapOptions"
        :label="item.label"
        :key="item.key"
        :name="item.key"
      >
        <keep-alive>
          <tab-pane
            v-if="activeName == item.key"
            @changeApiType="changeApiType"
            :changed="changed"
            :type="item.key"
            @create="showCreatedTimes"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabPane from './components/tabPane'

export default {
  name: 'Api',
  components: { tabPane },
  data() {
    return {
      tabMapOptions: [
        { label: 'AUTH-API', key: 'AUTH' },
        { label: 'TOKEN-API', key: 'TOKEN' },
        { label: 'OPEN-API', key: 'OPEN' }
      ],
      activeName: 'AUTH',
      createdTimes: 0,
      changed: [false, false, false]
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    },
    changeApiType(type, val) {
      if (val) {
        this.changed = [val, val, val]
      } else {
        this.changed[type] = val
      }
    }
  }
}
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
